<template>
	<view class="page-view flex flex-direction" :style="skin">
		<!-- <zx-nav title="极速下单" bg="#fff" fixedTop></zx-nav> -->
		<view class="flex-sub main">
			<view class="top-warp card">
				<view class="searchbar flex align-center justify-between">
					<view class="search flex align-center" @tap="showProductModal">
						<image src="/static/flower.png" mode="widthFix"></image>
						<text>{{ product.name || '搜索要下单的鲜花' }}</text>
					</view>
					<view class="search flex align-center flex-sub" @tap="navTo('/pages/quickOrder/list')">
						<image src="/static/list.png" mode="widthFix"></image>
						<text>分类选择</text>
					</view>
					<view class="export" @tap="navTo('/pages/quickOrder/orderlist')">
						<image src="/static/export.png" mode="widthFix"></image>
						<view>导入常购</view>
					</view>
				</view>
				<view class="filterbar">
					<view class="filter-item flex align-center">
						<view>
							等级
							<text class="text-red">*</text>
						</view>
						<view class="tags flex align-center flex-sub">
							<view
								class="tag"
								:class="[
									{
										'bg-orange': item.id == product_dengji
									}
								]"
								v-for="(item, index) in dengjiList"
								:key="index"
								@tap="changeDengji(item.id)"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="filter-item flex align-center">
						<view>
							偏好
							<text class="text-red">*</text>
						</view>
						<view class="tags flex align-center flex-sub">
							<view
								class="tag"
								:class="[
									{
										'bg-orange': item.value == like
									}
								]"
								v-for="(item, index) in phList"
								:key="index"
								@tap="changePh(item.value)"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="filter-item flex align-center" v-if="guigeList.length > 0">
						<view>
							规格
							<text class="text-red">*</text>
						</view>
						<view class="tags flex align-center flex-sub flex-wrap">
							<view
								class="tag"
								:class="[
									{
										'bg-orange': item.id == product_guige
									}
								]"
								v-for="(item, index) in guigeList"
								:key="index"
								@tap="changeGuige(item.id)"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
					<view class="flex align-center filter-item" style="font-size: 28rpx">
						<view>
							<text class="text-gray">均价:</text>
							<text>￥{{ avg_price || '0.0' }}/扎</text>
						</view>
						<view class="margin-left">
							<text class="text-gray">库存:</text>
							<text>{{ stock || '--' }}</text>
						</view>
					</view>
				</view>

				<view class="operateBar flex align-center justify-between">
					<view>
						数量
						<text class="text-red">*</text>
					</view>
					<input class="flex-sub" type="number" v-model="qty" placeholder="输入下单数量" />
					<view>扎</view>
					<view class="addbtn" @tap="addquickProduct">
						<text class="cuIcon cuIcon-add"></text>
						<text>加入采购单</text>
					</view>
				</view>
			</view>
			<view class="card orderbox">
				<view class="card-hd flex align-center justify-between">
					<text>采购单</text>
					<view class="save text-orange" v-if="goodsList && goodsList.length > 0" @tap="showSaveModal">
						<image src="/static/241226/save.png" mode="widthFix"></image>
						<text>保存为常购清单</text>
					</view>
				</view>
				<view class="card-bd">
					<view class="tip" v-if="goodsList && goodsList.length > 0">提交清单后，系统会自动匹配商品并加入购物车中</view>
					<view class="stip" v-else>请选择鲜花加入采购单</view>
					<view class="list">
						<tui-swipe-action v-for="(goodsinfo, index) in goodsList" :key="index">
							<view slot="content" class="item flex align-center">
								<view class="imgbox">
									<image :lazy-load="true" :src="goodsinfo.product_info.product_url_img + '?imageView2/0/w/150'" mode="aspectFill"></image>
								</view>

								<view class="flex-sub">
									<view class="flex align-center justify-between">
										<view class="name">
											<text>{{ goodsinfo.product_info.product_name }}</text>
											<text class="text-orange margin-left-sm">{{ goodsinfo.product_dengji_ }}</text>
										</view>
										<view class="price text-orange">均价：{{ goodsinfo.product_info.price_avg || '--' }}</view>
									</view>
									<view class="flex align-end justify-between">
										<view>
											<view class="u-m-t-10">
												<text>{{ goodsinfo.product_guige_ }}</text>
												<text class="u-m-l-10">库存：{{ goodsinfo.product_info.stock }}</text>
											</view>
											<view class="u-m-t-10">{{ goodsinfo.like_ }}</view>
										</view>
										<numberbox
											:size="24"
											v-model="goodsinfo.qty || 0"
											class="cartnum"
											:max="goodsinfo.product_info.stock"
											:min="0"
											@change="({ value }) => editquickProduct(value, goodsinfo)"
										></numberbox>
									</view>
								</view>
							</view>
							<view slot="button" class="delbtn flex align-center justify-center" @tap="delquickProduct(goodsinfo.id)">删除</view>
						</tui-swipe-action>
					</view>
				</view>
			</view>
		</view>
		<view class="footerbar">
			<image src="/static/241226/del.png" mode="widthFix" @tap="delAllProduct"></image>
			<view class="submitBtn flex-sub" @tap="addShopcart">提交清单至购物车</view>
		</view>
		<view class="cu-modal" :class="isShow ? 'show' : ''" @tap="isShow = !isShow">
			<view class="cu-dialog bg-white addTemplate" @tap.stop="">
				<view class="input-group"><input placeholder="请输入常购清单名称" v-model="tmpname" /></view>
				<view class="ftbar flex" @tap="isShow = !isShow">
					<view class="btn">取消</view>
					<view class="btn" @tap="saveTmp">保存</view>
				</view>
			</view>
		</view>
		<filterProModal ref="filterProModal" @selectProduct="selectProduct"></filterProModal>
	</view>
</template>

<script>
import numberbox from '@/components/numberbox.vue';
import tuiSwipeAction from '@/components/tui-swipe-action/tui-swipe-action.vue';
import filterProModal from './components/filterProModal.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			dengjiList: [
				{
					id: 1,
					name: 'A级'
				},
				{
					id: 3,
					name: 'B级'
				},
				{
					id: 4,
					name: 'D级'
				},
				{
					id: 5,
					name: 'C级'
				},
				{
					id: 8,
					name: 'E级'
				}
			],
			guigeList: [],
			phList: [
				{
					value: 1,
					name: '销量优先'
				},
				{
					value: 2,
					name: '价格优先'
				},
				{
					value: 3,
					name: '满意度优先'
				}
			],
			like: 1,
			product_dengji: 1,
			product_guige: 1,
			product: {},
			qty: '',
			goodsList: [],
			isShow: false,
			tmpname: '',
			isInit: false,
			stock: 0,
			avg_price: 0
		};
	},
	computed: {
		...mapState(['quickOrderInfo'])
	},
	components: {
		numberbox,
		tuiSwipeAction,
		filterProModal
	},
	created() {
		this.getPurchaseList();
	},
	onLoad(options) {
		wx.setNavigationBarTitle({
			title: '极速下单'
		});
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
		if (options.id) {
			this.product = {
				name: options.name,
				id: options.id
			};
			this.getquickProduct({
				product_id: this.product.id
			});
		}
	},
	onShow() {
		if ((this.product && this.product.id) || (this.quickOrderInfo && this.quickOrderInfo.id)) {
			if (this.quickOrderInfo && this.quickOrderInfo.id) {
				this.product = {
					name: this.quickOrderInfo.name,
					id: this.quickOrderInfo.id
				};
				this.SET_quickOrder({});
			}
			this.getquickProduct({
				product_id: this.product.id
			});
		} else if (this.isInit) {
			this.dengjiList = [
				{
					id: 1,
					name: 'A级'
				},
				{
					id: 3,
					name: 'B级'
				},
				{
					id: 4,
					name: 'D级'
				},
				{
					id: 5,
					name: 'C级'
				},
				{
					id: 8,
					name: 'E级'
				}
			];
			this.guigeList = [];
			this.product_dengji = 1;
			this.product_guige = 1;
			this.like = 1;
			this.getPurchaseList();
		}
		this.isInit = true;
	},
	methods: {
		...mapMutations(['SET_quickOrder']),
		getdengji() {
			this.$postAction(this.$api.getdengji).then(da => {
				console.log('da', JSON.stringify(da.data));
				this.dengjiList = [...da.data];
				this.product_dengji = this.dengjiList[0].id;
			});
		},
		getquickProduct(param) {
			this.$postAction(this.$api.getquickProduct, param).then(da => {
				if (da.totalRow) {
					this.dengjiList = [...da.totalRow.data.products_dengji];
					this.guigeList = [...da.totalRow.data.products_guige];
					this.product_dengji = this.dengjiList[0].id;
					this.product_guige = this.guigeList[0].id;
					this.getquickProductStockandPrice({
						...param,
						search_more: JSON.stringify([
							{
								product_dengji: this.product_dengji
							},
							{
								product_guige: this.product_guige
							}
						])
					});
				} else {
					this.dengjiList = [];
					this.guigeList = [];
				}
			});
		},
		/* 筛选均价和库存 */
		getquickProductStockandPrice(param) {
			this.$postAction(this.$api.getquickProduct, param).then(da => {
				this.stock = da.data.stock || 0;
				this.avg_price = da.data.price_avg || 0;
			});
		},
		addquickProduct() {
			if (!this.product || !this.product.id) {
				uni.showToast({
					title: '请选择产品',
					icon: 'none'
				});
				return;
			}
			this.qty = this.qty - 0;
			this.stock = this.stock - 0;
			if (!this.qty) {
				uni.showToast({
					title: '请输入购物数量',
					icon: 'none'
				});
				return;
			}
			if (this.qty > this.stock) {
				uni.showModal({
					title: '询问',
					content: '当前在售库存小于需求量，是否全部添加？',
					success: res => {
						if (res.confirm) {
							this.addquickProductConfirm(this.stock);
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			} else {
				this.addquickProductConfirm(this.qty);
			}
		},
		addquickProductConfirm(qty) {
			this.$postAction(this.$api.addquickProduct, {
				product_id: this.product.id,
				qty: qty,
				product_dengji: this.product_dengji,
				product_guige: this.product_guige,
				like: this.like
			}).then(da => {
				this.getPurchaseList();
				this.product = {};
				this.stock = 0;
				this.avg_price = 0;
			});
		},
		/* 更新采购单数量 */
		editquickProduct(value, info) {
			this.$postAction(this.$api.addquickProduct + '/' + info.id, {
				product_id: info.product_id,
				qty: value,
				product_dengji: info.product_dengji,
				product_guige: info.product_guige,
				like: info.like,
				noloading: true
			}).then(da => {
				this.getPurchaseList();
			});
		},
		getPurchaseList() {
			this.$postAction(this.$api.getPurchaseList).then(da => {
				this.goodsList = da.data;
			});
		},

		delquickProduct(id) {
			this.$postAction(this.$api.delquickProduct + id).then(da => {
				this.getPurchaseList();
			});
		},
		navTo(path) {
			uni.navigateTo({
				url: path
			});
		},
		changeDengji(dengji) {
			this.product_dengji = dengji;
			if (this.product && this.product.id) {
				this.getquickProductStockandPrice({
					product_id: this.product.id,
					search_more: JSON.stringify([
						{
							product_dengji: this.product_dengji
						},
						{
							product_guige: this.product_guige
						}
					])
				});
			}
		},
		changeGuige(guige) {
			this.product_guige = guige;
			if (this.product && this.product.id) {
				this.getquickProductStockandPrice({
					product_id: this.product.id,
					search_more: JSON.stringify([
						{
							product_dengji: this.product_dengji
						},
						{
							product_guige: this.product_guige
						}
					])
				});
			}
		},
		changePh(ph) {
			this.like = ph;
		},
		showSaveModal() {
			this.isShow = true;
			this.tmpname = '';
		},
		saveTmp() {
			if (!this.tmpname) {
				uni.showToast({
					title: '请输入模板名称',
					icon: 'none'
				});
				return;
			}
			if (this.goodsList.length == 0) {
				uni.showToast({
					title: '请选择商品',
					icon: 'none'
				});
				return;
			}
			this.$postAction(this.$api.saveTmp, {
				name: this.tmpname,
				quick_id: this.goodsList.map(item => item.id).join(',')
			}).then(da => {
				uni.showToast({
					title: '保存成功',
					icon: 'none'
				});
			});
		},
		/* 加入购物车 */
		addShopcart() {
			this.$postAction(this.$api.addShopcart).then(da => {
				uni.switchTab({
					url: '/pages/car/car'
				});
			});
		},
		/* 删除全部商品 */
		delAllProduct() {
			uni.showModal({
				title: '提示',
				content: '确定要清空当前列表吗',
				success: res => {
					if (res.confirm) {
						this.$postAction(this.$api.delAllquickProduct).then(da => {
							this.getPurchaseList();
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		selectProduct(productInfo) {
			this.product = {
				...productInfo
			};
			this.getquickProduct({
				product_id: this.product.id
			});
		},
		showProductModal() {
			this.$refs.filterProModal.show();
		}
	}
};
</script>
<style scoped>
@import './modal.css';
</style>
<style lang="scss" scoped>
.page-view {
	background: #f4f4f4;
	height: 100vh;
	overflow: auto;
}

.main {
	min-height: 0;
	overflow: auto;
	margin: 0;
}

.card {
	background: #fff;
	margin: 20upx;
	border-radius: 16upx;
}

.top-warp {
	padding: 30upx;

	.search {
		background: #f2f3f7;
		border-radius: 8upx;
		padding: 0 20rpx;
		height: 60rpx;
		color: #333;
		font-size: 24rpx;
		width: 310rpx;

		image {
			width: 30upx;
			height: 30upx;
			margin-right: 10rpx;
		}

		& + .search {
			margin: 0 30rpx;
		}
	}

	.export {
		font-size: 24rpx;
		color: var(--nav-bg);

		image {
			display: block;
			width: 30rpx;
			height: 30px;
			margin: 0 auto 10rpx;
		}
	}

	.filterbar {
		font-size: 30rpx;
	}

	.filter-item {
		margin-top: 15upx;
	}

	.tags {
		margin-left: 4rpx;

		.tag {
			border: 1px solid #ececec;
			padding: 0 16rpx;
			line-height: 50upx;
			color: #666;
			font-size: 28rpx;
			border-radius: 6rpx;
			white-space: nowrap;
			margin: 6upx;

			&.bg-orange {
				background: var(--nav-bg);
				border-color: var(--nav-bg);
				color: #fff;
			}
		}
	}

	.operateBar {
		border-top: 1px solid #eee;
		margin-top: 20upx;
		padding-top: 20upx;

		input {
			margin-left: 20rpx;
		}
	}

	.addbtn {
		border: 1px solid var(--nav-bg);
		text-align: center;
		border-radius: 50rpx;
		padding: 10rpx 20rpx;
		color: var(--nav-bg);
		margin-left: 20upx;
	}
}

.card-hd {
	padding: 30rpx 30rpx 5upx;
	color: #333;
	font-weight: 600;
	font-size: 32rpx;

	.save {
		font-size: 28rpx;
		display: flex;
		align-items: center;
		font-weight: 400;

		image {
			width: 26upx;
			height: 26upx;
			margin-right: 10upx;
		}
	}
}

.card-bd {
	padding: 15rpx 30rpx 30rpx;

	.tip {
		color: #1c4ebd;
		background: #f6f7fb;
		font-size: 20upx;
		padding: 10rpx;
	}

	.stip {
		color: #999;
		font-size: 24upx;
	}

	.list {
		color: #848484;
		line-height: 1.2;

		.item {
			padding: 15upx 0;
			border-bottom: 1px solid #f4f4f4;
			font-size: 24upx;
		}

		.delbtn {
			color: #fff;
			background: #e63e3e;
			font-size: 28upx;
			height: 100%;
		}
	}

	.name {
		color: #333;
		font-size: 28upx;
	}

	.imgbox {
		width: 120upx;
		height: 120upx;
		border-radius: 8upx;
		overflow: hidden;
		margin-right: 15upx;

		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}
}

.footerbar {
	position: relative;
	background: #fff;
	padding: 20upx 30upx;
	padding-bottom: calc(30upx + env(safe-area-inset-bottom) / 2);
	display: flex;
	align-items: center;
	box-shadow: 0 -1upx 6upx rgba(0, 0, 0, 0.05);

	image {
		width: 37upx;
		height: 37upx;
		margin-right: 20upx;
	}

	.submitBtn {
		line-height: 80upx;
	}
}

.addTemplate {
	padding: 40upx 60upx;

	.input-group {
		height: 100upx;
		border-radius: 8upx;
		background: #eee;

		input {
			display: block;
			width: 100%;
			height: 100%;
			line-height: 100upx;
		}
	}

	.ftbar {
		margin-top: 40upx;

		.btn {
			line-height: 80upx;
			border-radius: 50upx;
			padding: 0 40upx;
			font-size: 30upx;
			color: #000;
			background: #e5e5e5;

			& + .btn {
				flex: 1;
				margin-left: 20upx;
				background: var(--nav-bg);
				color: #fff;
			}
		}
	}
}

.submitBtn {
	color: #fff;
	text-align: center;
	border-radius: 14rpx;
	background: var(--nav-bg);
	line-height: 80rpx;
	font-size: 32rpx;
	display: block;
}
</style>
